<script lang="tsx" setup>
import { renderFileJump } from '../../../../../../utils';
import { getPermitF9 } from '../../../apis';
import PageHeader from '../../../components/page-header.vue';
import ErrorModule from '../../../components/error-module.vue';
import { useF9Context } from '../../../use/use-context';
import Descriptions from '../components/descriptions.vue';
import Tabs from '../components/tabs.vue';

interface Props {
  /** 标题名称 */
  title: string;
  /** 标题 id */
  menuId: string;
  /** 数值 */
  count: number;
}

const {
  title,
  menuId,
  count
} = defineProps<Props>();

const { companyId } = useF9Context();
const { data: permitF9Data, loading, error } = useRequest(getPermitF9, {
  defaultParams: [{ id: companyId }]
});

const activeTab = ref(0);

const infos = computed(() => {
  return (item) => {
    return [
      {
        name: '证书编号', value: <div class="flex justify-between">
          <span>
            <span class="mr-10px">
              {item.dischargePermitNumber}
            </span>
            {
              item.permitStatuses?.length ? <span>
              {item.permitStatuses?.map((sub_item) => {
                return <span class="tag tags-status mr-10px">{sub_item.status}</span>;
              })}
              </span> : null
            }
          </span>
          
          <span
            onClick={() => permitChangesDetailFn(item.permitChanges)}
            class="common-link">{item.permitChanges?.length ? '查看变更 ' + item.permitChanges?.length : ''}</span>
        </div>
      },
      {
        name: '许可证书', value:
          <div class="flex justify-start">
            {
              item?.attachments?.map((sub_item) => {
                return <span class="mr-10px">{renderFileJump(sub_item, sub_item.name)}</span>;
              })
            }
          </div>
        
      },
      {
        name: '有效期限',
        value: item.periodOfValidityStartDate + '至' + item.periodOfValidityExpirationDate
      },
      { name: '发证日期', value: item.issuingDate },
      { name: '发证机关', value: item.issuingDepartment },
      { name: '生产经营场所', value: item.productionSite },
      { name: '技术负责人', value: item.dischargePermitDuplicates.technicalDirector },
      { name: '联系电话', value: item.dischargePermitDuplicates.phoneNo },
      { name: '行业类别', value: item.dischargePermitDuplicates.industryClassification },
      {
        name: '主要污染物类别', value: <>
          {!item.isWasteGasPollution && !item.isWasteWaterPollution ? '-' :
            <>
              {item.isWasteGasPollution ? <span class="tag tags-gas">废气</span> : null}
              {item.isWasteWaterPollution ? <span class="tag tags-water">废水</span> : null}
            </>
          }
        </>
      },
      { name: '大气主要污染物种类', value: item.dischargePermitDuplicates.majorAirPollutant },
      {
        name: '大气污染物排放规律',
        value: item.dischargePermitDuplicates.airPollutantDischargeRules
      },
      {
        name: '大气污染物排放执行标准',
        value: item.dischargePermitDuplicates.airPollutantDischargeStandards
      },
      {
        name: '废水主要污染物种类',
        value: item.dischargePermitDuplicates.majorWastewaterPollutants
      },
      {
        name: '废水污染物排放规律',
        value: item.dischargePermitDuplicates.wastewaterPollutantDischargeRules
      },
      {
        name: '废水污染物排放执行标准',
        value: item.dischargePermitDuplicates.wastewaterPollutantDischargeStandards
      },
      {
        name: '排污权使用和交易信息',
        value: item.dischargePermitDuplicates.emissionRightsUseAndTrading,
        span: 2
      }
    ];
  };
});

const columns = computed(() => {
  const yearColumns = [{
    field: 'allowableEmissionLimitFirstYear',
    title: '第一年'
  },
    {
      field: 'allowableEmissionLimitSecondYear',
      title: '第二年'
    },
    {
      field: 'allowableEmissionLimitThirdYear',
      title: '第三年'
    },
    {
      field: 'allowableEmissionLimitFourthYear',
      title: '第四年'
    },
    {
      field: 'allowableEmissionLimitFifthYear',
      title: '第五年'
    }];
  
  return [{
    field: 'pollutantType',
    title: '指标',
    headerAlign: 'left',
    align: 'left',
  }, ...yearColumns.map((item) => {
    return {
      ...item,
      width: 95,
      headerAlign: 'left',
      align: 'right'
    };
  })];
});

const tableInfos = reactive([
  { name: '大气污染物排放许可限值', valueName: 'wasteGasPermitLimits' },
  { name: '废水污染物排放许可限值', valueName: 'wasteWaterPermitLimits' }
]);

// 变更弹窗
const showPermitChangesDetail = ref(false);
const permitChangesDetails = ref([]);

const detailColumns = ref([
  { field: 'dischargePermitNumber', align: 'center', title: '许可证编号', minWidth: 200 },
  { field: 'changeType', align: 'center', title: '业务类型' },
  { field: 'version', align: 'center', title: '版本', width: 100 },
  { field: 'completionDate', align: 'center', title: '办结日期', width: 100 },
  {
    align: 'center',
    title: '有效期限',
    width: 200,
    formatter: ({ row }) => {
      return `${row?.periodOfValidityStartDate ?? '-'} 至 ${row?.periodOfValidityExpirationDate ?? '-'}`;
    }
  }
]);

const permitChangesDetailFn = (data) => {
  showPermitChangesDetail.value = true;
  permitChangesDetails.value = data;
};
</script>

<template>
  <page-header class="my-15px" :count="count" :title="title" :menuId="menuId" is-small />
  <error-module v-if="error" :error="error" />
  <tabs v-else-if="permitF9Data?.values?.length" :tabsData="permitF9Data?.values" :activeTab="activeTab"
    tabName="dischargePermitNumber">
    <template #default="slot">
      <descriptions class="pollution-discharge-permits-desc" :item="slot.item" :infos="infos" />
      
      <div class="table-con flex justify-between ">
        <div v-for="(item, index) in tableInfos" :key="index">
          <div class="infos">
            <span class="title">{{ item.name }}</span>
            <span class="desc">全厂合计(t/a)</span>
          </div>
          
          <vc-table
            class="w-572px"
            :maxHeight="260"
            :tableConfig="{sortConfig: {remote: false, trigger: 'cell',}}"
            :loading="loading"
            :tableData="slot.item?.[item.valueName]"
            :columns="columns"
          />
        </div>
      </div>
    </template>
  </tabs>
  <vc-nodata v-else :type="200"/>
  
  <vc-dialog v-model="showPermitChangesDetail"
    :title="`许可变更明细${permitChangesDetails?.length}次`" width="800">
    <div class="detail-table">
      <vc-table
        :maxHeight="350" :columns="detailColumns" :tableData="permitChangesDetails" />
    </div>
  </vc-dialog>
</template>

<style lang="scss" scoped>
.table-con {
  // gap: 16px;
  .infos {
    margin: 10px 0;

    .title {
      color: #333333;
      font-weight: 500;
      font-size: 14px;
    }

    .desc {
      color: #666666;
      font-weight: 400;
      font-size: 12px;
      margin-left: 18px;
    }
  }
}

.pollution-discharge-permits-desc {
  :deep(.tag) {
    padding: 4px;
    font-size: 12px;
    line-height: 17px;
    margin-right: 10px;
    color: #fff;
    border-radius: 3px;

    &.tags-gas {
      background-color: #7A7BF5;
    }

    &.tags-water {
      background-color: #6DABE3;
    }

    &.tags-status {
      background-color: #fcefee;
      border: 1px solid rgba(246, 76, 76, 0.3);
      color: #F64C4C;
    }
  }
}


.detail-table {
  padding: 20px 15px;
}
</style>
